<style>
    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
        line-height: inherit;
    }

    .h3, h3 {
        font-size: inherit;
    }

    .modal-mask {
        position: fixed;
        z-index: 9998;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        display: table;
        transition: opacity .3s ease;
    }

    .modal-wrapper {
        display: table-cell;
        vertical-align: middle;
    }

    .img_pick_panel .img_pick_area, .img_pick_panel .group_list {
        height: inherit;
    }

    .modal-container {
        width: 300px;
        margin: 0px auto;
        padding: 10px 30px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
        transition: all .3s ease;
        font-family: Helvetica, Arial, sans-serif;
    }

    /*mn*/
    .media_dialog {
        padding: 0px 150px;
    }

    #js_video_search_list {
        height: 250px;
    }

    .dialog_media_container {
        height: 433px;
    }

    .pagination {
        margin: 0;
    }

    /*mn*/
    .modal-header h3 {
        margin-top: 0;
        color: #42b983;
    }

    .modal-body {
        margin: 20px 0;
    }

    .modal-default-button {
        float: right;
    }

    /*
     * The following styles are auto-applied to elements with
     * transition="modal" when their visibility is toggled
     * by Vue.js.
     *
     * You can easily play with the modal transition by editing
     * these styles.
     */

    .modal-enter {
        opacity: 0;
    }

    .modal-leave-active {
        opacity: 0;
    }

    .modal-enter .modal-container,
    .modal-leave-active .modal-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    .media_dialog.appmsg_list{ padding: 15px 20px!important; }

    .msgList{ line-height: 30px; font-size: 14px; letter-spacing: 0; border: 1px solid #dbdbdb; }
    .msgList li{ overflow: hidden; border-bottom: 1px solid #dbdbdb; }
    .msgList li:last-child{ border-bottom: none; }
    .msgList li .msgItemDiv:last-child{ border-right: none; }
    li.active{ background: #f1f1f1; }
    .msgItemDiv{ width: 25%; float: left; text-align: center; border-right: 1px solid #dbdbdb; }


    .msgList li:nth-child(1) { background: #f8f8f9; height: 40px; line-height: 40px; font-weight: bold; }
    .msgList li { font-size: 12px; height: 48px; line-height: 48px; }
    .msgItemDiv { border: 0; }

</style>
<script type="text/x-template" id="modal-template">
    <transition name="modal">
        <div class="modal-mask">

            <!-- 图文消息选择框 -->

            <div v-if="dataType==2" class="dialog_wrp img_dialog_wrp" style="width: 846px; margin-left: -423px; margin-top: -290px;" :style="'height:'+height+'px'">
                <div class="dialog">
                    <div class="dialog_hd">
                        <h3>选择图片</h3>
                        <a href="javascript:;" @click="$emit('close')" class="icon16_opr closed pop_closed">关闭</a>
                    </div>
                    <div class="dialog_bd">
                        <div class="img_pick_panel inner_container_box side_l cell_layout">
                            <div class="inner_side">
                                <div class="group_list">
                                    <div class="inner_menu_box">
                                        <dl class="inner_menu js_group">

                                            <template v-for="(g,index) in groups">
                                                <dd class="inner_menu_item js_groupitem"
                                                    :class="{selected:selectedGroup==g.id}"
                                                    :data-groupid="g.id">
                                                    <a href="javascript:;" class="inner_menu_link" title="g.name"
                                                       @click="selectedGroup=g.id">
                                                        <strong v-text="g.name"></strong><em class="num">(<span
                                                            v-text="g.count"></span>)</em>
                                                    </a>
                                                </dd>
                                            </template>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="inner_main">
                                <div class="img_pick_area">
                                    <div class="img_pick_area_inner"><!-- :style="'height:'+contentHeight+'px'" -->
                                        <div class="img_pick"
                                             style="overflow: auto;"><!--  :style="'height:'+wrapperHeight+'px'" -->
                                            <i class="icon_loading_small white js_loading" style="display: none;"></i>
                                            <ul class="group js_list img_list" id="selected_mask">
                                                <template v-for="(pic,index) in data">
                                                    <li class="img_item js_imageitem" data-id="100000003"
                                                        data-url="pic.src" data-oristatus="0" data-format="jpeg">
                                                        <label class="frm_checkbox_label img_item_bd "
                                                               @click="selectedVal = pic.id;selected_mask = 1"
                                                               :class="{selected:selectedVal == pic.id}">
                                                            <div class="pic_box">
                                                                <img class="pic js_pic" data-src="pic.path"
                                                                     :src="pic.path" style="width: 117px;">
                                                            </div>
                                                            <span class="lbl_content" v-text="pic.fileName"></span>
                                                            <div class="selected_mask">
                                                                <div class="selected_mask_inner"></div>
                                                                <div class="selected_mask_icon"></div>
                                                            </div>
                                                        </label>
                                                    </li>
                                                </template>
                                            </ul>
                                        </div>
                                        <div id="js_pagebar" class="pagination_wrp pageNavigator">
                                            <div id="wxPagebar_1480578839079" class="pagination">
                                                <span class="page_nav_area">
                                                    <a href="javascript:void(0);" class="btn page_prev"
                                                       @click="gotoPrevPage">
                                                      <i class="arrow"></i></a><span class="page_num"><label
                                                        v-text="currentPageIndex"></label><span class="num_gap">/</span><label
                                                        v-text="pageCount"></label></span>
                                                    <a @click="gotoNextPage" href="javascript:void(0);"
                                                       class="btn page_next"><i
                                                            class="arrow"></i></a></span>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <p class="dialog_ft_desc">已选<span class="js_selected">{{selected_mask}}</span>个，可选{{data.length}}个
                            </p>
                        </div>
                    </div>

                    <div class="dialog_ft">
                        <Button type="success" @click="confirmSelection" data-index="0">确定</Button>
                        <Button type="ghost"  @click="$emit('close')" data-index="1">取消</Button>
                    </div>

                </div>
            </div>

            <!-- 图文消息选择框 -->
            <div class="dialog_wrp media align_edge" v-if="dataType==10 && data.length >=0"
                 style="width: 960px; margin-left: -480px; margin-top: -270px;">
                <div class="dialog">
                    <div class="dialog_hd">
                        <h3>选择素材</h3>
                        <!--#0001#-->
                        <a href="javascript:;" @click="$emit('close')" class="icon16_opr closed pop_closed">关闭</a>

                        <!--%0001%-->
                    </div>
                    <div class="dialog_bd">
                        <div class="dialog_media_container appmsg_media_dialog" :style="'height:'+height+'px'">
                            <div class="sub_title_bar in_dialog">
                                <div class="search_bar">
                                    <span class="frm_input_box search with_del append">
                                        <a class="del_btn dn" href="javascript:" id="searchCloseBt"><i class="icon_search_del"></i>&nbsp;</a>

                                        <a id="msgSearchBtn" href="javascript:"
                                           @click="refresh"
                                           class="frm_input_append"><i class="icon16_common search_gray">搜索</i>&nbsp;</a>
                                        <input id="msgSearchInput" type="text" placeholder="标题/作者/摘要" v-model="keyword" class="frm_input">
                                    </span>
                                </div>
                                <div class="appmsg_create tr">
                                    <a href="${ctx}/material/news/editPage" target="iframe-tab-content">
                                        <Button class="ivu-btn ivu-btn-success"><Icon type="android-add"></Icon> 新建图文消息</Button>
                                    </a>
                                </div>
                            </div>
                            <div class="dialog_media_inner" style="height:300px;">
                                <div class="js_appmsg_list appmsg_list media_dialog" style="padding: 15px 20px; ">
                                    <ul class="msgList">

                                        <li>
                                            <div class="msgItemDiv">消息标题</div>
                                            <div class="msgItemDiv">创建时间</div>
                                            <div class="msgItemDiv">创建人</div>
                                            <div class="msgItemDiv">操作</div>
                                        </li>

                                        <template v-if="data.length > 0" v-for="(item,index) of data">
                                            <li @click="selectedVal=item.id" :class="{active:selectedVal==item.id}">
                                                <div class="msgItemDiv">{{item.articles[0].title}}</div>
                                                <div class="msgItemDiv">{{item.created}}</div>
                                                <div class="msgItemDiv">{{item.createrName}}</div>
                                                <div class="msgItemDiv">
                                                    <button class="btn-xs btn-info btn-preview" style="border:none;" @click="previewNews(item.id)"><i class="fa fa-eye"></i> 预览</button>
                                                </div>
                                            </li>
                                        </template>

                                        <template v-if="data.length <= 0">
                                            <li class="text-center">素材库中暂无内容！</li>
                                        </template>

                                    </ul>
                                </div>
                                <div class="pagination_wrp pageNavigator" style="padding:0 20px;">
                                    <div class="pagination" id="wxPagebar_1484034072817">
                                        <span class="page_nav_area">
                                            <a href="javascript:void(0);" class="btn page_prev" @click="gotoPrevPage"><i class="arrow"></i></a>
                                            <span class="page_num">
                                                <label v-text="currentPageIndex"></label>
                                                <span class="num_gap">/</span>
                                                <label v-text="pageCount"></label>
                                            </span>
                                            <a href="javascript:void(0);" class="btn page_next" @click="gotoNextPage"><i class="arrow"></i></a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="dialog_ft">
                        <Button type="success" @click="confirmSelection" data-index="0">确定</Button>
                        <Button type="ghost"  @click="$emit('close')" data-index="1">取消</Button>
                    </div>

                </div>
            </div>

            <!-- 声音选择窗口-->

            <div class="dialog_wrp align_edge audio_dialog"
                 v-if="dataType==3 "
                 style="width: 960px; margin-left: -480px; margin-top: -279.5px;">
                <div class="dialog">
                    <div class="dialog_hd">
                        <h3>请选择语音</h3>
                        <!--#0001#-->
                        <a href="javascript:;" @click="$emit('close')" class="icon16_opr closed pop_closed">关闭</a>
                        <!--%0001%-->
                    </div>
                    <div class="dialog_bd">
                        <div class="audio_box">
                            <div class="global_mod audio_box_hd float_layout gap_top">
                                <p class="global_info gap_top_item tips_global jsAudioTips" style="display:none;">由于版本兼容的原因,你暂时只可以选择60秒内的语音发送</p>
                                <p class="global_extra">
                                    <a href="${ctx}/material/voice/editPage" target="iframe-tab-content">
                                        <Button class="ivu-btn ivu-btn-success"><Icon type="android-add"></Icon> 新建语音</Button>
                                    </a>
                                </p>
                            </div>
                            <div class="audio_box_bd audio_list_container">

                                <div class="media_list_tips_wrp tips_global" style="display:none;">
                                    <span class="tips">暂无素材</span>
                                    <span class="vm_box"></span>
                                </div>


                                <div class="media_list_tips_wrp" style="display:none;">
                                    <i class="icon_loading_small white">loading...</i>
                                    <span class="vm_box"></span>
                                </div>


                                <div class="audio_list jsPluginAudioList">
                                    <template v-for="(item,index) in data">

                                        <label
                                                @click="selectedVal = item.id;"
                                                :class="{selected:selectedVal == item.id}"
                                                class="frm_radio_label audio_item <!--disabled-->"
                                                :for="item.resourceId">
                                            <i class="icon_radio"></i>
                                            <span class="lbl_content">
                                            <span class="audio_meta audio_title">{{item.title}}</span>
                                            <span class="audio_meta audio_date">{{item.created}}</span>
                                            <span
                                                    class="audio_meta audio_length">{{item.duration||formatSeconds}}</span>
                                            <span class="audio_meta audio_play jsPluginAudioPlay audio_default"
                                                  id="pluginAudioPlay">
                                            <!--<div class="qqmusic_audio " id="wxAudioBox" data-aid="">
                                              <a class="audio_switch" href="javascript:;" onclick="return false;" title="点击播放">
                                                <i class="icon_qqmusic"></i>
                                              </a>
                                            </div>--></span>
                                        </span>
                                            <input type="radio" :data-label="item.title"
                                                   class="frm_radio jsPluginAudioRadio"
                                                   :id="item.resourceId">
                                        </label>
                                    </template>
                                </div>
                                <div class="pagination_wrp jsPluginAudioPage">
                                    <div class="pagination" id="wxPagebar_1484793389125">
                                    <span class="page_nav_area">
                                        <a href="javascript:void(0);" class="btn page_first"
                                           v-if="currentPageIndex ==1">首页</a>
                                        <a href="javascript:void(0);" @click="gotoPrevPage" class="btn page_prev"
                                           v-if="currentPageIndex > 1"><i class="arrow"></i></a>

                                            <span class="page_num">
                                                <label v-text="currentPageIndex"></label>
                                                <span class="num_gap">/</span>
                                                <label v-text="pageCount"></label>
                                            </span>

                                        <a href="javascript:void(0);" class="btn page_next" @click="gotoNextPage"><i
                                                class="arrow"></i></a>
                                        <a href="javascript:void(0);" class="btn page_last"
                                           v-if="currentPageIndex <pageCount">末页</a>
                                    </span>

                                        <!-- <span class="goto_area">
                      <input type="text">
                      <a href="javascript:void(0);" class="btn page_go">跳转</a>
                      </span>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="dialog_ft">
                        <Button type="success"  @click="confirmSelection" >确定</Button>
                        <Button type="ghost" @click="$emit('close')">取消</Button>
                    </div>

                </div>
            </div>


            <!-- 视频素材选择弹窗 -->

            <div class="dialog_wrp dialog_select_video" v-if="dataType==15"
                 style="width: 960px; margin-left: -480px; margin-top: -308px;">
                <div class="dialog">
                    <div class="dialog_hd">
                        <h3>选择视频</h3>
                        <!--#0001#-->
                        <a href="javascript:;" @click="$emit('close')" class="icon16_opr closed pop_closed">关闭</a>
                        <!--%0001%-->
                    </div>
                    <div class="dialog_bd">
                        <div class="dialog_media_container">
                            <div class="sub_title_bar in_dialog">
                                <div class="title_tab js_videotab">
                                    <ul class="tab_navs title_tab" data-index="0">
                                        <li data-index="0" class="tab_nav first js_top selected" data-id="15"><a
                                                href="javascript:;">素材库</a></li>
                                    </ul>
                                </div>
                                <div class="search_bar dn">
                            <span class="frm_input_box search with_del append">
                                <a class="del_btn" href="javascript:"><i class="icon_search_del"></i>&nbsp;</a>
                                <a href="javascript:" class="frm_input_append"><i
                                        class="icon16_common search_gray">搜索</i>&nbsp;</a>
                                <input type="text" placeholder="关键字" value="" class="frm_input">
                            </span>
                                </div>
                                <div class="richvideo_create js_video_create">
                                    <a href="${ctx}/material/video/editPage" target="iframe-tab-content">
                                        <Button class="ivu-btn ivu-btn-success"><Icon type="android-add"></Icon> 新建视频</Button>
                                    </a>
                                </div>
                            </div>
                            <div class="js_video_status js_video_content dn" style="display: block;">
                                <div class="richvideo_list media_dialog" id="js_videomsg_list">
                                    <div class="richvideo_col">
                                        <div class="inner">
                                            <template v-for="(item,index) in evenNumbersNews">
                                                <div>
                                                    <div @click="selectedVal = item.id ;"
                                                         :class="{selected:selectedVal == item.id}"
                                                         class="richvideo with_msg_box Js_videomsg">
                                                        <div class="richvideo_content" style="z-index: 0">
                                                            <h4 class="title" v-text="item.title"></h4>
                                                            <div class="video_info">
                                                                <em class="time">{{item.duration|formatSeconds}}</em>
                                                                <em class="res"></em>
                                                            </div>
                                                            <div class="video_extra_info" data-seq="0">
                                                                <img class="video_thumb" :src="item.coverImage" alt="">
                                                                <span class="video_length">{{item.duration|formatSeconds}}</span>
                                                                <div class="play_mask">
                                                                    <i class="icon_video_play"></i>
                                                                    <span class="vm_box"></span>
                                                                </div>
                                                            </div>
                                                            <div class="video_desc">{{item.title}}</div>
                                                        </div>
                                                        <div class="richvideo_mask"></div>
                                                        <i class="icon_card_selected">已选择</i>
                                                    </div>
                                                    <div class="richvideo_msg_box">
                                                        <p class="mini_tips warn" style="display: none;">
                                                            该视频由于版权问题无法在微信中播放
                                                        </p>
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                    &nbsp;
                                    <div class="richvideo_col">
                                        <div class="inner">
                                            <template v-for="(item,index) in oddNumbersNews">
                                                <div>
                                                    <div @click="selectedVal = item.id;"
                                                         :class="{selected:selectedVal == item.id}"
                                                         class="richvideo with_msg_box Js_videomsg" data-original="0"
                                                         data-vid="i13124ao95x">
                                                        <div class="richvideo_content" style="z-index: 0">
                                                            <h4 class="title" v-text="item.title"></h4>
                                                            <div class="video_info">
                                                                <em class="time">{{item.duration|formatSeconds}}</em>
                                                                <em class="res"></em>
                                                            </div>
                                                            <div class="video_extra_info" data-seq="0">
                                                                <img class="video_thumb" :src="item.coverImage" alt="">
                                                                <span class="video_length">{{item.duration|formatSeconds}}</span>
                                                                <div class="play_mask">
                                                                    <i class="icon_video_play"></i>
                                                                    <span class="vm_box"></span>
                                                                </div>
                                                            </div>
                                                            <div class="video_desc">{{item.title}}</div>
                                                        </div>
                                                        <div class="richvideo_mask"></div>
                                                        <i class="icon_card_selected">已选择</i>
                                                    </div>
                                                    <div class="richvideo_msg_box">
                                                        <p class="mini_tips warn" style="display: none;">
                                                            该视频由于版权问题无法在微信中播放
                                                        </p>
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="js_video_status js_video_tencent link_search_video_box dn js_video_search">
                                <div class="video">
                                    <div class="frm_control_group">
                                        <label class="frm_label">视频/图文网址</label>
                                        <div class="frm_controls">
                    <span class="frm_input_box">
                        <input type="text" class="frm_input js_video_txurl js_video_url"
                               placeholder="支持插入微信公众号文章链接、视频详情页链接和腾讯视频链接">
                    </span>
                                            <p class="frm_msg fail js_video_url_tip">只支持已发布的微信公众号链接、视频详情页链接和腾讯视频链接</p>
                                        </div>
                                    </div>
                                    <!-- <div class="video_preview js_video_preview"></div> -->
                                    <!-- 原来的js_video_preview去掉改成和素材库、小视频一样的方式通过richvideo_list插入视频@lulu -->
                                </div>
                                <div class="richvideo_list media_dialog" id="js_video_search_list">
                                    <div class="richvideo_col">
                                        <div class="inner"></div>
                                    </div><!-- 这里能否控制如果是腾讯视频的链接则只显示一个richvideo_col，如需支持多视频才显示两个richvideo_col？@lulu
            肯定可以啊！ @radeonwu -->
                                    <div class="richvideo_col">
                                        <div class="inner"></div>
                                    </div>
                                    <!--<div class="pagination_wrp pageNavigator js_video_tencent_pagebar"></div>-->
                                    <!-- 如果有多视频的情况下才显示分页，视频搜索这里用单独的分页组件，不要使用外面的分页（js_pagebar） @lulu-->
                                    <!--图文消息最多出现3个视频，这里不需要分页 @radeonwu-->
                                </div>
                            </div>
                            <div class="js_video_status js_video_loading" style="display: none;">
                                <i class="icon_loading_small white">loading...</i>
                            </div>
                            <div class="js_video_status js_video_none dn">
                                <div class="no_media_wrp">
                                    <p class="empty_tips js_empty_tips"></p>
                                </div>
                                <span class="vm_box"></span>
                            </div>
                            <div class="pagination_wrp pageNavigator js_pagebar">
                                <div class="pagination" id="wxPagebar_1484790292864">
                    <span class="page_nav_area">
                    <a href="javascript:void(0);" class="btn page_prev" @click="gotoNextPage"><i class="arrow"></i></a>
                    <span class="page_num">
                        <label v-text="currentPageIndex"></label><span class="num_gap">/</span><label
                            v-text="pageCount"></label>
                    </span>
                        <a href="javascript:void(0);" class="btn page_next" @click="gotoPrevPage"><i class="arrow"></i></a>
                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="dialog_ft">
                        <Button type="success"  @click="confirmSelection" >确定</Button>
                        <Button type="ghost" @click="$emit('close')">取消</Button>
                    </div>

                </div>
            </div>
        </div>
    </transition>
</script>
